<template>
  <div class="privacy-page">
    <!-- 返回按钮 -->
    <button class="back-button" @click="handleBack">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
        <path d="M19 12H5M5 12l7 7 7-7" />
      </svg>
      <span>Back</span>
    </button>

    <div class="privacy-container">
      <!-- 标题区域 -->
      <header class="privacy-header">
        <h1>Privacy Policy</h1>
        <p class="last-updated">Last Updated: October 30, 2025</p>
      </header>

      <!-- 主体内容区 -->
      <div class="privacy-content">
        <!-- 左侧目录 -->
        <aside class="privacy-sidebar">
          <nav class="toc">
            <ul>
              <li
                v-for="(item, index) in privacyList"
                :key="index"
                :class="{ active: activeIndex === index }"
                @click="scrollToSection(index)"
                class="toc-item">
                <span class="toc-number">{{ index + 1 }}.</span>
                <span class="toc-title">{{ item.title }}</span>
              </li>
            </ul>
          </nav>
        </aside>

        <!-- 右侧内容 -->
        <main class="privacy-main">
          <p class="intro">
            Your privacy is important to us. This Privacy Policy explains how Nexbie ("we," "us," or
            "our"), a service operated by Shenzhen NexusMake Technology Co., Ltd., collects, uses,
            and protects your personal information.
          </p>

          <div class="sections-container" ref="sectionsContainer" @scroll="handleScroll">
            <section
              v-for="(item, index) in privacyList"
              :key="index"
              :ref="(el) => (sectionRefs[index] = el)"
              class="privacy-section">
              <h2 class="section-heading">
                <span class="heading-number">{{ index + 1 }}.</span>
                {{ item.title }}
              </h2>
              <div class="section-body" v-html="item.content"></div>
            </section>
          </div>
        </main>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();

  // 隐私政策数据（完全使用原文案）
  const privacyList = ref([
    {
      title: 'Information We Collect',
      content: `
      <ul>
        <li><strong>Account Information:</strong> When you register, we collect your username, email address, and password if any.</li>
        <li><strong>Profile Information:</strong> You may voluntarily add more information to your profile, such as a bio, username or avatar.</li>
        <li><strong>Content Information:</strong> We collect the content you create, including text prompts, uploaded images, and AI-generated artwork.</li>
        <li><strong>Financial Information:</strong> To process payouts, we collect your payment information (e.g., PayPal email). This information is handled by secure third-party payment processors.</li>
        <li><strong>Usage Data:</strong> We automatically collect information about how you interact with our Service, such as your IP address, browser type, and pages visited.</li>
      </ul>
    `,
    },
    {
      title: 'How We Use Your Information',
      content: `
      <ul>
        <li>To provide and maintain the Service.</li>
        <li>To process transactions and send you related information.</li>
        <li>To communicate with you, including responding to your inquiries and sending service-related emails.</li>
        <li>To personalize your experience and recommend content.</li>
        <li>To monitor and analyze usage to improve the Service.</li>
        <li>To enforce our Terms and prevent fraudulent activity.</li>
      </ul>
    `,
    },
    {
      title: 'How We Share Your Information',
      content: `
      <p>We do not sell your personal information. We may share your information only in the following circumstances:</p>
      <ul>
        <li><strong>Publicly:</strong> Your username, profile information, and public content are visible to others on the Service.</li>
        <li><strong>With Service Providers:</strong> We may share information with third-party vendors who perform services on our behalf. These vendors are bound by contractual obligations to keep personal information confidential and use it only for the purposes for which we disclose it to them. These providers include:
          <ul>
            <li><strong>AI Feature Providers:</strong> To power certain features on our platform. Specifically:
              <ul>
                <li>Processor: fal – Features & Labels, Inc.</li>
                <li>Privacy Policy: <a href="https://fal.ai/privacy" target="_blank" rel="noopener noreferrer" style="color: #f76b1b; text-decoration: underline;">https://fal.ai/privacy</a></li>
                <li>Data & Purpose: They process user-uploaded images (which you provide for this purpose) to provide AI-powered image stylization and generation services (e.g., in the Nex Lab).</li>
              </ul>
            </li>
          </ul>
        </li>
        <li><strong>For Legal Reasons:</strong> We may disclose your information if we believe in good faith that it is required by law, to respond to a legal process, or to protect the rights, property, and safety of Nexbie, our users, or the public.</li>
      </ul>
    `,
    },
    {
      title: 'Your Rights and Choices',
      content: `<p>You can access and update your account information at any time. You may also delete your account, which will remove your personal data from our active systems.</p>`,
    },
    {
      title: 'Data Security',
      content: `<p>We implement industry-standard security measures to protect your information. However, no method of transmission over the internet is 100% secure.</p>`,
    },
  ]);

  // 状态管理
  const activeIndex = ref(0);
  const sectionsContainer = ref<HTMLDivElement | null>(null);
  const sectionRefs = ref<any>([]);
  const scrollTimeout = ref<number | null>(null);

  // 滚动到指定章节（修复点击无反应问题）
  const scrollToSection = (index: number) => {
    const container = sectionsContainer.value;
    const section = sectionRefs.value[index];

    if (container && section) {
      // 立即更新活动状态
      activeIndex.value = index;

      // 精确计算滚动位置
      const containerRect = container.getBoundingClientRect();
      const sectionRect = section.getBoundingClientRect();
      const scrollPosition = sectionRect.top - containerRect.top + container.scrollTop - 20;

      // 原生平滑滚动，兼容性更好
      container.scrollTo({
        top: scrollPosition,
        behavior: 'smooth',
      });
    }
  };

  // 滚动监听，自动更新当前章节
  const handleScroll = () => {
    // 防抖优化
    if (scrollTimeout.value) {
      window.clearTimeout(scrollTimeout.value);
    }

    scrollTimeout.value = window.setTimeout(() => {
      if (!sectionsContainer.value) return;

      const container = sectionsContainer.value;
      const scrollTop = container.scrollTop;

      // 遍历章节找到当前可见项
      for (let i = 0; i < sectionRefs.value.length; i++) {
        const section = sectionRefs.value[i];
        if (!section) continue;

        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;

        // 章节顶部在可视区域内（50px容差）
        if (sectionTop <= scrollTop + 50 && sectionTop + sectionHeight > scrollTop) {
          activeIndex.value = i;
          break;
        }
      }
    }, 100);
  };

  // 返回按钮处理
  const handleBack = () => {
    console.log('返回上一页');
    // 实际应用中使用路由返回
    router.back();
  };

  // 初始化
  onMounted(() => {
    nextTick(() => {
      handleScroll();
    });
  });
</script>

<style scoped>
  .privacy-page {
    min-height: 100vh;
    background-color: #f9f9f9;
    padding: 20px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
  }

  /* 返回按钮 */
  .back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #f76b1b;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
  }

  .back-button:hover {
    background-color: rgba(247, 107, 27, 0.1);
  }

  .privacy-container {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 40px;
  }

  /* 标题区域 */
  .privacy-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
  }

  .privacy-header h1 {
    color: #f76b1b;
    font-size: 28px;
    margin-bottom: 12px;
  }

  .last-updated {
    color: #666;
    font-size: 14px;
  }

  /* 主体内容区布局 */
  .privacy-content {
    display: flex;
    gap: 30px;
    height: calc(100vh - 200px);
    min-height: 500px;
  }

  /* 左侧目录 */
  .privacy-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .toc {
    height: 100%;
    overflow-y: auto;
    padding: 10px 0;
  }

  .toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .toc-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    color: #333;
    font-size: 14px;
    border-left: 3px solid transparent;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
  }

  .toc-item:hover {
    background-color: rgba(247, 107, 27, 0.05);
    padding-left: 22px;
  }

  .toc-item.active {
    background-color: rgba(247, 107, 27, 0.1);
    border-left-color: #f76b1b;
    color: #f76b1b;
    font-weight: 500;
  }

  .toc-number {
    font-weight: 600;
    margin-right: 8px;
    min-width: 20px;
  }

  .toc-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 右侧内容区 */
  .privacy-main {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .intro {
    color: #333;
    line-height: 1.6;
    margin-bottom: 24px;
    font-size: 15px;
  }

  .sections-container {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 30px 40px;
    line-height: 1.8;
  }

  .privacy-section {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  .privacy-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .section-heading {
    color: #222;
    font-size: 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
  }

  .heading-number {
    color: #f76b1b;
    font-weight: 700;
    margin-right: 10px;
  }

  .section-body {
    color: #444;
    font-size: 15px;
  }

  .section-body ul {
    margin: 16px 0;
    padding-left: 24px;
  }

  .section-body li {
    margin-bottom: 8px;
  }

  .section-body strong {
    color: #f76b1b;
  }

  .section-body a {
    color: #f76b1b !important;
    text-decoration: underline;
  }

  .section-body a:hover {
    text-decoration: none;
  }

  /* 响应式适配 */
  @media (max-width: 1024px) {
    .privacy-content {
      flex-direction: column;
      height: auto;
      gap: 20px;
    }

    .privacy-sidebar {
      width: 100%;
      max-height: 200px;
    }

    .sections-container {
      padding: 20px;
      max-height: 600px;
    }
  }

  @media (max-width: 768px) {
    .privacy-header h1 {
      font-size: 24px;
    }

    .toc-item {
      padding: 10px 15px;
      font-size: 13px;
    }

    .section-heading {
      font-size: 18px;
    }
  }
</style>
